<template>
  <div class="result">
    <!-- 返回按钮 -->
    <button @click="goBack" class="back-btn">返回诊断</button>
    
    <div class="diagnosis-container">
      <table class="modern-table">
        <thead>
          <tr>
            <th class="category-header">类别</th>
            <th>内容</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>症状</td>
            <td v-html="reason || '暂无症状数据'"></td>
          </tr>
          <tr>
            <td>症状原因</td>
            <td v-html="symptom || '暂无症状原因数据'"></td>
          </tr>
          <tr>
            <td>调理方法</td>
            <td v-html="method || '暂无调理方法数据'"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reason: '', // 症状数据
      symptom: '', // 症状原因数据
      method: '' // 调理方法数据
    };
  },
  created() {
    this.loadFromLocalStorage();
  },
  methods: {
    loadFromLocalStorage() {
      this.reason = localStorage.getItem('reason') || '';
      this.symptom = localStorage.getItem('symptom') || '';
      this.method = localStorage.getItem('method') || '';
    },
    // 返回按钮点击事件
    goBack() {
      // 使用 Vue Router 跳转到指定页面，假设返回到首页
      this.$router.push({ name: 'FramePalm' });
    }
  }
};
</script>

<style scoped>
.result {
  background-image: url('@/assets/image/jwCH4bFk.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* 固定背景 */
  height: 100vh;
  /* 铺满整个视口高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 对齐内容到顶部 */
}

.back-btn {
  background-color: #cc5632; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  font-size: 16px;
  padding: 10px 20px; /* 按钮内边距 */
  margin: 20px 0; /* 按钮外边距 */
  border: none; /* 去除按钮边框 */
  border-radius: 5px; /* 按钮圆角 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

.back-btn:hover {
  background-color: #45a049; /* 鼠标悬停时背景色 */
}

.diagnosis-container {
  margin: 10% auto; /* 添加上下外边距 */
  padding: 20px;
  max-width: 70%; /* 限制表格宽度 */
  background-color: #f3fcf5; /* 柔和背景色 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
}

.modern-table {
  width: 100%; /* 表格宽度 */
  border-collapse: separate;
  border-spacing: 0; /* 保持分隔单元格 */
  font-size: 28px; /* 字体大小 */
  text-align: left;
  color: #333333; /* 默认文字颜色 */
}

thead th {
  background-color: #84c186; /* 表头背景色 */
  color: #ffffff; /* 表头文字颜色 */
  text-transform: uppercase; /* 转换为大写 */
  font-weight: bold;
  padding: 15px; /* 表头内边距 */
  border-top-left-radius: 10px; /* 左上圆角 */
  border-top-right-radius: 10px; /* 右上圆角 */
}

.category-header {
  color: #ffffff !important; /* 强制将类别文字颜色设为白色 */
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行背景色 */
}

tbody tr:nth-child(odd) {
  background-color: #ffffff; /* 奇数行背景色 */
}

tbody tr:hover {
  background-color: #eaf5ea; /* 鼠标悬停背景色 */
}

td, th {
  padding: 20px; /* 单元格内边距 */
  border-bottom: 1px solid #e0e0e0; /* 底部分隔线 */
}

td:first-child, th:first-child {
  width: 1%; /* 第一列宽度自适应 */
  white-space: nowrap; /* 防止文字换行 */
  font-weight: bold; /* 第一列加粗 */
}

td:last-child {
  color: #555555; /* 内容列文字颜色 */
  font-size: 28px; /* 内容列字体稍大 */
  line-height: 1.6; /* 行高适中 */
}

/* 小屏优化 */
@media (max-width: 768px) {
  .diagnosis-container {
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 缩小阴影 */
  }

  .modern-table {
    font-size: 16px;
  }

  td, th {
    padding: 10px; /* 减少单元格间距 */
  }
}
</style>
